<!-- src/views/PublicActivityDetail.vue -->
<template>
  <div class="public-activity-detail">
    <h2>{{ activity.title }}</h2>
    <p><strong>日期:</strong> {{ activity.date }}</p>
    <p><strong>地点:</strong> {{ activity.location }}</p>
    <p><strong>描述:</strong> {{ activity.description }}</p>
    <router-link to="/public-activities">返回活动列表</router-link>
  </div>
</template>

<script>
import activities from '@/data/activities.js';

export default {
  data() {
    const activityId = parseInt(this.$route.params.id);
    const activity = activities.find(a => a.id === activityId);
    return {
      activity: activity || {}
    };
  }
};
</script>

<style scoped>
.public-activity-detail {
  padding: 20px;
}

.public-activity-detail h2 {
  text-align: center;
}

.public-activity-detail p {
  margin-bottom: 10px;
}

.public-activity-detail a {
  text-decoration: none;
  color: #42b983;
}

.public-activity-detail a:hover {
  text-decoration: underline;
}
</style>